<!-- 阶段分布 -->
<template>
  <div v-loading="loading">
    <div style="width:100%;height: 300px;">
      <pieChart v-if="chartData.datas.length > 0" :chart-data="chartData" height="100%" @xData="changeStages" />
      <div v-else class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>
    <div class="list-table">
      <div class="area-header">
        <indirectProjectSummary ref="indirectProjectSummary" />
      </div>
    </div>
  </div>
</template>

<script>
import indirectProjectSummary from '@/views/deal/bf/indirectProjectAnalysis/indirectProjectSummary.vue'
import { getStageEcharts } from '@/api/bf/indirectProjectAnalysis/indirectProjectSummary'
import pieChart from '@/views/chart/pieChart.vue'
export default {
  components: {
    pieChart,
    indirectProjectSummary
  },
  data() {
    return {
      loading: false,
      chartData: {
        datas: []
      }
    }
  },
  watch: {
  },
  beforeDestroy() {
  },
  mounted() {
    this.load()
  },
  methods: {
    changeStages(val) {
      this.$nextTick(() => {
        this.$refs.indirectProjectSummary.parentQueryParams.enterpriseStage = val.dictValue
        this.$refs.indirectProjectSummary.getList()
      })
    },
    load() {
      this.loading = true
      getStageEcharts().then(response => {
        this.loading = false
        if (response.data && response.data.length > 0) {
          this.chartData = {
            center: ['50%', '40%'],
            datas: response.data.filter(v => v.name)
          }
          this.chartData.datas = this.chartData.datas.map(ele => { return { value: ele.value, name: this.$t(ele.name), dictValue: ele.dictValue } })
        } else {
          this.chartData.datas = []
        }
        this.changeStages('notNull')
      })
    }
  }
}
</script>

